<template>
  <div class="add-property-drawer">
    <el-drawer
      :title="getOwnershipName"
      :visible.sync="drawer"
      direction="rtl"
      :wrapperClosable="false"
      :modal-append-to-body="false"
      :show-close="false"
      size="40%"
    >
      <div class="add-property-content">
        <el-form ref="form" :model="form" label-width="150px" size="small">
          <div class="add-property-content-scroll">
            <el-row>
              <el-col :span="10">
                <el-form-item label="资产地块编号：" prop="propertyCode">
                  <el-input v-model="form.propertyCode"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="10">
                <el-form-item label="资产地块名称：" prop="propertyName">
                  <el-input v-model="form.propertyName"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="10">
                <el-form-item label="产权人：" prop="propertyOwner">
                  <el-input v-model="form.propertyOwner"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="10">
                <el-form-item label="所属单位：">
                  <el-select
                    v-model="form.ownershipId"
                    placeholder="请选择"
                    style="width: 100%"
                  >
                    <el-option
                      v-for="item in affiliatedUnitList"
                      :key="item.ownershipId"
                      :label="item.ownershipName"
                      :value="item.ownershipId"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="10">
                <el-form-item label="坐落位置：">
                  <el-input v-model="form.propertyLocation"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="10">
                <el-form-item label="所在社区：">
                  <el-select
                    v-model="form.propertyCommunity"
                    placeholder="请选择"
                    style="width: 100%"
                  >
                    <el-option
                      v-for="item in communityList"
                      :key="item.areaId"
                      :label="item.areaName"
                      :value="item.areaId"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="10">
                <el-form-item label="资产取得年月：">
                  <el-date-picker
                    v-model="form.propertyAcquireDate"
                    type="month"
                    value-format="yyyy-MM"
                    format="yyyy-MM"
                    placeholder="选择日期"
                    style="width: 100%"
                  >
                  </el-date-picker>
                </el-form-item>
              </el-col>

              <el-col :span="10">
                <el-form-item label="GIS坐标：" label-width="100%">
                  <el-row>
                    <el-col :span="16" style="margin-left: 0">
                      <el-input v-model="gisCoordinate"></el-input>
                    </el-col>
                    <el-col :span="6">
                      <span
                        style="
                          color: #0064c8;
                          margin-left: 10px;
                          cursor: pointer;
                          width: 50%;
                        "
                        @click="calibrationClick"
                        >地图校准</span
                      >
                    </el-col>
                  </el-row>
                </el-form-item>
              </el-col>
            </el-row>

            <el-row>
              <el-col :span="10">
                <el-form-item label="投入使用年月：">
                  <el-date-picker
                    v-model="form.usageDate"
                    type="month"
                    value-format="yyyy-MM"
                    format="yyyy-MM"
                    placeholder="选择日期"
                    style="width: 100%"
                  >
                  </el-date-picker>
                </el-form-item>
              </el-col>
              <el-col :span="10">
                <el-form-item label="宗地面积（㎡）：">
                  <el-input v-model="form.propertyAncestralLandArea"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="20">
                <el-form-item label="土地性质：" label-width="100%">
                  <el-radio-group v-model="form.landNature">
                    <el-radio :label="1">国有出让</el-radio>
                    <el-radio :label="2">国有划拨</el-radio>
                    <el-radio :label="3">集体</el-radio>
                    <el-radio :label="4">其他</el-radio>
                  </el-radio-group>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="20" class="upload-img-opt">
                <el-form-item label="实景照片：" label-width="100%">
                  <el-upload
                    style="display: inline-flex"
                    action="/admin/common/image/upload"
                    list-type="picture-card"
                    accept=".bmp,.gif,.jpg,.jpeg,.png"
                    :headers="headersAuthorization"
                    :limit="3"
                    :file-list="realisticPhotosList"
                    :on-preview="handlePictureCardPreview"
                    :on-remove="
                      (file, fileList) =>
                        handleRemove(file, fileList, 'realisticPhotos')
                    "
                    :on-success="
                      (response, file, fileList) =>
                        handleRealisticPhotosSuccess(response, file, fileList)
                    "
                    :before-upload="
                      (file) =>
                        beforeRealisticPhotosUpload(file, [
                          'bmp',
                          'gif',
                          'jpg',
                          'jpeg',
                          'png',
                        ])
                    "
                  >
                    <i class="el-icon-plus"></i>
                    <i class="el-upload__text">点击上传图片</i>
                  </el-upload>

                  <div class="img-content"></div> </el-form-item
              ></el-col>
            </el-row>

            <el-row>
              <el-col :span="20" class="quanType">
                <div>权证情况：</div>
                <el-form-item
                  label="权证类型："
                  style="
                    display: flex;
                    align-items: center;
                    color: #88909b;
                    margin-top: 6px;
                  "
                >
                  <el-radio-group v-model="flag" @change="radioChange">
                    <el-radio :label="1">不动产权证</el-radio>
                    <el-radio :label="0">房产证+土地证</el-radio>
                  </el-radio-group>
                </el-form-item>
              </el-col>
              <el-col :span="22" class="upload-quanz">
                <div v-if="flag === 1">
                  <div class="fcz">
                    <p style="color: #606266; font-size: 14px">不动产权证</p>
                    <el-input
                      style="width: 30%; margin: 0 15px"
                      size="mini"
                      v-model="form.immovablePropertyCertificateCode"
                    />
                    <el-upload
                      class="upload-demo"
                      action="/admin/common/upload"
                      :headers="headersAuthorization"
                      :on-success="
                        (response, file, fileList) =>
                          handleBDCSuccess(response, file, fileList)
                      "
                      :on-remove="
                        (file, fileList) => handleRemove(file, fileList, 'bdc')
                      "
                      multiple
                      :limit="3"
                      :file-list="realEstateList"
                    >
                      <el-button size="mini" type="primary"
                        >上传图片/附件</el-button
                      >
                    </el-upload>
                  </div>
                </div>

                <div v-else-if="flag === 0">
                  <el-checkbox-group
                    v-model="checkList"
                    @change="checkboxChange"
                  >
                    <div class="fcz">
                      <el-checkbox label="房产证"></el-checkbox>
                      <div
                        class="upload-info"
                        v-show="checkList.includes('房产证')"
                      >
                        <el-input
                          v-model="form.houseOwnershipCertificateCode"
                          style="width: 50%; margin: 0 15px"
                          size="mini"
                        />
                        <el-upload
                          class="upload-demo"
                          action="/admin/common/upload"
                          :headers="headersAuthorization"
                          :on-success="
                            (response, file, fileList) =>
                              handleFDCSuccess(response, file, fileList)
                          "
                          :on-remove="
                            (file, fileList) =>
                              handleRemove(file, fileList, 'fdc')
                          "
                          multiple
                          :limit="3"
                          :file-list="propertyCertificateList"
                        >
                          <el-button size="mini" type="primary"
                            >上传图片/附件</el-button
                          >
                        </el-upload>
                      </div>
                    </div>
                    <div class="tdz">
                      <el-checkbox label="土地证"></el-checkbox>
                      <div
                        class="upload-info"
                        v-show="checkList.includes('土地证')"
                      >
                        <el-input
                          v-model="form.landCertificateCode"
                          style="width: 50%; margin: 0 15px"
                          size="mini"
                        />
                        <el-upload
                          class="upload-demo"
                          action="/admin/common/upload"
                          :headers="headersAuthorization"
                          :on-success="
                            (response, file, fileList) =>
                              handleTDZSuccess(response, file, fileList)
                          "
                          :on-remove="
                            (file, fileList) =>
                              handleRemove(file, fileList, 'tdz')
                          "
                          multiple
                          :limit="3"
                          :file-list="landCertificateList"
                        >
                          <el-button size="mini" type="primary"
                            >上传图片/附件</el-button
                          >
                        </el-upload>
                      </div>
                    </div>
                  </el-checkbox-group>
                </div>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="22">
                <el-form-item label="管理类型："> </el-form-item>
              </el-col>
              <el-col :span="22">
                <div class="type-content">
                  <tr>
                    <th>资产类型</th>
                    <th>管理部门</th>
                  </tr>
                  <tr
                    v-for="(item, index) in form.propertyTypeList"
                    :key="index"
                  >
                    <td>
                      <el-cascader
                        v-model="item.propertyTypeCode"
                        :options="assetTypeList"
                        :show-all-levels="false"
                        style="width: 90%"
                        clearable
                        filterable
                        @change="cascaderChange($event, index)"
                        :disabled="!permissions.includes('edit:manage:type:disabled')"
                      ></el-cascader>
                    </td>
                    <td>
                      <el-cascader
                        v-model="item.manageDeptId"
                        :options="deptsList"
                        :show-all-levels="false"
                        style="width: 90%"
                        clearable
                        filterable
                        :disabled="!permissions.includes('edit:manage:type:disabled')"
                      ></el-cascader>
                    </td>
                    <td @click="deleteTypeClick(index)" v-if="permissions.includes('delete:manage:type:disabled')">
                      <img src="../../assets/images/asset-delete.png" />
                    </td>
                  </tr>
                  <div class="add-type" @click="addTypeClick" v-if="permissions.includes('add:manage:type:disabled')">
                    <i class="el-icon-plus"></i>
                  </div>
                </div>
              </el-col>
            </el-row>
          </div>
          <el-form-item class="opt-cla">
            <el-button type="primary" @click="onSubmit">
              <template v-if="forBaseInfo && forBaseInfo.propertyId">
                编辑
              </template>
              <template v-else>添加</template>
            </el-button>
            <el-button
              @click="
                $emit('update:drawer', false);
                clear();
              "
              >取消</el-button
            >
          </el-form-item>
        </el-form>
      </div>
    </el-drawer>

    <el-dialog
      title="设置经纬度"
      :visible.sync="longitudeShow"
      width="600px"
      :close-on-press-escape="false"
      :close-on-click-modal="false"
    >
      <Map ref="mapRef" :lat="latitude" :lng="longitude" />
      <span slot="footer" class="dialog-footer">
        <el-button @click="longitudeShow = false">取 消</el-button>
        <el-button type="primary" @click="longitudeDialogSubmitFn"
          >确 定</el-button
        >
      </span>
    </el-dialog>

    <!-- 预览实景照片 -->
    <el-dialog :visible.sync="realisticPhotosdialogVisible">
      <img width="100%" :src="realisticPhotosdialogImageUrl" alt="" />
    </el-dialog>
  </div>
</template>

<script>
import Map from "./components/map-new.vue";
import {
  addProperty,
  editProperty,
  areaList,
  propertyPcategoryList,
  propertyDictList,
  propertyOwnList,
} from "@/api/shops";
import { getToken } from "@/utils/auth";
export default {
  props: {
    drawer: {
      type: Boolean,
      default: false,
    },
    forBaseInfo: {
      type: Object,
    },
    pcategoryName: {
      type: String,
      // require: true,
    },
    propertyCategoryId: {
      type: Number,
      // require: true,
    },
    id: {
      type: String,
    },
  },
  components: {
    Map,
  },
  data() {
    return {
      deptsList: [], // 管理部门
      realisticPhotosList: [], // 实景照片
      realisticPhotosdialogImageUrl: "", // 预览实景照片
      realisticPhotosdialogVisible: false,
      realEstateList: [], // 不动产权证
      propertyCertificateList: [], // 房产证
      landCertificateList: [], // 土地证
      affiliatedUnitList: [],

      form: {
        propertyCode: undefined,
        propertyName: undefined,
        propertyOwner: undefined,
        propertyCategoryId: undefined,
        ownershipId: undefined,
        propertyLocation: undefined,
        propertyCommunity: undefined,
        propertyGisLongitude: undefined,
        propertyGisLatitude: undefined,
        propertyAncestralLandArea: undefined,
        immovablePropertyWarrantFlag: 1,
        houseOwnershipWarrantFlag: 1,
        landCertificateWarrantFlag: 1,
        immovablePropertyCertificateAttachIds: undefined, // 不动产权证
        houseOwnershipCertificateAttachIds: undefined, // 房产证
        landCertificateAttachIds: undefined, // 土地证
        immovablePropertyCertificateCode: undefined, //不动产权证号
        houseOwnershipCertificateCode: undefined, // 房产证号
        landCertificateCode: undefined, // 土地证号
        propertyAcquireDate: undefined, //资产取得年月
        usageDate: undefined, // 投入使用年月
        landNature: 1,
        realisticPictureAttachIds: undefined,
        propertyTypeList: [
          {
            propertyTypeCode: "",
            manageDeptId: "",
            leaseFlag: "",
          },
        ],
      }, // 资产信息
      flag: 1, // 默认是不动产权证
      assetTypeList: [], // 资产类型List
      communityList: [], // 所在社区list
      gisCoordinate: "", //坐标
      sqOptions: [
        {
          value: "1",
          label: "群里社区",
        },
      ],
      qsSptions: [
        {
          value: "1",
          label: "南京溧水经济技术开发集团",
        },
      ],
      assetList: [
        {
          type: "",
          partment: "",
        },
      ],
      checkList: [],
      longitudeShow: false,
      latitude: "",
      longitude: "",
      headersAuthorization: null,
      leaseFlag: 0,
      businessNature: 1,
    };
  },
  computed: {
    getOwnershipName() {
      if (this.forBaseInfo && this.forBaseInfo.propertyId) {
        return `编辑资产地块 - ${this.forBaseInfo.pcategoryName}`;
      } else {
        return `添加资产地块 - ${this.pcategoryName}`;
      }
    },
    permissions() {
      return this.$store.getters.permissions
    }
  },
  watch: {
    drawer(val) {
      this.getListDept();
      this.getPropertyDictList();
    },
    forBaseInfo: {
      handler(val) {
        if (val && val.propertyId) {
          // 编辑
          let propertyTarget = val.propertyTypeList.filter(
            (v) => v.propertyTypeCode
          );
          this.form = Object.assign({}, val);
          this.form.propertyTypeList = propertyTarget;

          // 地图经纬度
          if (val.propertyGisLongitude && val.propertyGisLatitude) {
            this.gisCoordinate = `${val.propertyGisLongitude},${val.propertyGisLatitude}`;
          }

          // 实景照片
          if (
            val.realisticPictureAttachList &&
            val.realisticPictureAttachList.length > 0
          ) {
            this.realisticPhotosList = val.realisticPictureAttachList.map(
              (v) => {
                return {
                  name: v.originalAttName,
                  url: v.attUrl,
                };
              }
            );
          }

          // 不动产权证
          if (
            val.immovablePropertyCertificateAttachList &&
            val.immovablePropertyCertificateAttachList.length > 0
          ) {
            this.flag = 1;
            this.realEstateList =
              val.immovablePropertyCertificateAttachList.map((v) => {
                return {
                  name: v.originalAttName,
                  url: v.attUrl,
                };
              });
          } else {
            this.flag = 0;
            this.realEstateList = undefined;
          }

          // 房产证
          if (
            val.houseOwnershipCertificateAttachList &&
            val.houseOwnershipCertificateAttachList.length > 0
          ) {
            this.flag = 0;
            this.checkList.push("房产证");
            this.propertyCertificateList =
              val.houseOwnershipCertificateAttachList.map((v) => {
                return {
                  name: v.originalAttName,
                  url: v.attUrl,
                };
              });
          } else {
            this.flag = 1;
            this.propertyCertificateList = undefined;
            let index = this.checkList.indexOf("房产证");
            if (index !== -1) {
              this.checkList.splice(index, 1);
            }
          }

          // 土地证
          if (
            val.landCertificateAttachList &&
            val.landCertificateAttachList.length > 0
          ) {
            this.flag = 0;
            this.checkList.push("土地证");
            this.landCertificateList = val.landCertificateAttachList.map(
              (v) => {
                return {
                  name: v.originalAttName,
                  url: v.attUrl,
                };
              }
            );
          } else {
            this.flag = 1;
            this.landCertificateList = undefined;
            let index = this.checkList.indexOf("土地证");
            if (index !== -1) {
              this.checkList.splice(index, 1);
            }
          }
          this.getListDept();
          this.getPropertyDictList();
        }
      },
      deep: true,
    },
  },
  mounted() {
    this.$nextTick(() => {
      this.init();
      this.getPropertyDictList();
      this.getAreaList();
      this.getListDept();
      this.getPropertyOwnList();
    });
  },
  methods: {
    getPropertyOwnList() {
      propertyOwnList().then((res) => {
        if (res.code == 200) {
          this.affiliatedUnitList = res.data;
        }
      });
    },
    removeEmptyChildren(arr, name, id) {
      return arr.map((item) => {
        if (item.children.length === 0) {
          return {
            label: item[name],
            value: item[id],
          };
        } else {
          return {
            label: item[name],
            value: item[id],
            children: this.removeEmptyChildren(item.children),
          };
        }
      });
    },
    // 部门管理
    getListDept() {
      let userInfo = JSON.parse(localStorage.getItem("userInfo"));
      this.deptsList = this.removeEmptyChildren(
        userInfo.depts,
        "deptName",
        "deptId"
      );
    },

    init() {
      // 获取用于上传的token
      this.headersAuthorization = {
        Authorization: "Bearer " + getToken(),
      };
    },
    handleRemove(file, fileList, type) {
      switch (type) {
        // 实景照片
        case "realisticPhotos":
          let target = fileList.map((item) => item.response.data.attId);
          if (target.length > 0) {
            this.form.realisticPictureAttachIds = target.join(",");
          } else {
            this.form.realisticPictureAttachIds = "";
          }
          break;
        // 不动产权证
        case "bdc":
          let bdcTarget = fileList.map((item) => item.response.data.attId);
          if (bdcTarget.length > 0) {
            this.form.immovablePropertyCertificateAttachIds =
              bdcTarget.join(",");
          } else {
            this.form.immovablePropertyCertificateAttachIds = "";
          }
          break;
        // 房产证
        case "fcz":
          let fczTarget = fileList.map((item) => item.response.data.attId);
          if (fczTarget.length > 0) {
            this.form.houseOwnershipCertificateAttachIds = fczTarget.join(",");
          } else {
            this.form.houseOwnershipCertificateAttachIds = "";
          }
          break;
        // 土地证
        case "tdz":
          let tdzTarget = fileList.map((item) => item.response.data.attId);
          if (tdzTarget.length > 0) {
            this.form.landCertificateAttachIds = tdzTarget.join(",");
          } else {
            this.form.landCertificateAttachIds = "";
          }
          break;
      }
    },
    handlePictureCardPreview(file) {
      this.realisticPhotosdialogImageUrl = file.url;
      this.realisticPhotosdialogVisible = true;
    },

    // 实景照片上传成功
    handleRealisticPhotosSuccess(res, file, fileList) {
      if (res.code != 200) {
        this.$message.error("上传失败");
        return;
      }
      let target = fileList.map((item) => item.response.data.attId);
      if (target.length > 0) {
        this.form.realisticPictureAttachIds = target.join(",");
      }
      console.log("上传成功", this.form.realisticPictureAttachIds);
    },
    // 上传前
    beforeRealisticPhotosUpload(file, _limitation) {
      let _inx = _limitation.findIndex((n) => n == file.name.split(".")[1]);
      const isLt2M = file.size / 1024 / 1024 < 500;
      if (_inx < 0) {
        this.$message.error(
          "文件格式错误，请上传图片类型,如：" +
            _limitation.join(",") +
            "等后缀的文件。"
        );
        return false;
      }
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 200MB!");
        return false;
      }
      return true;
    },

    // 不动产权证
    handleBDCSuccess(res, file, fileList) {
      if (res.code != 200) {
        this.$message.error("上传失败");
        return;
      }

      let target = fileList.map((item) => item.response.data.attId);
      if (target.length > 0) {
        this.form.immovablePropertyCertificateAttachIds = target.join(",");
      }
    },

    // 房产证
    handleFDCSuccess(res, file, fileList) {
      if (res.code != 200) {
        this.$message.error("上传失败");
        return;
      }

      let target = fileList.map((item) => item.response.data.attId);
      if (target.length > 0) {
        this.form.houseOwnershipCertificateAttachIds = target.join(",");
      }
    },

    // 土地证
    handleTDZSuccess(res, file, fileList) {
      if (res.code != 200) {
        this.$message.error("上传失败");
        return;
      }

      let target = fileList.map((item) => item.response.data.attId);
      if (target.length > 0) {
        this.form.landCertificateAttachIds = target.join(",");
      }
      console.log("上传成功不动产权证", this.form.landCertificateAttachIds);
    },

    // 权证情况
    radioChange(e) {
      if (e === 1) {
        // 不动产权证
        this.form.immovablePropertyWarrantFlag = 1;
        this.form.houseOwnershipWarrantFlag = 0;
        this.form.landCertificateWarrantFlag = 0;
        this.form.houseOwnershipCertificateAttachIds = undefined;
        this.form.landCertificateAttachIds = undefined;
        this.form.houseOwnershipCertificateCode = undefined;
        this.form.landCertificateCode = undefined;
        if (this.forBaseInfo && this.forBaseInfo.propertyId) {
          // 表示编辑的情况
          // 清空房产证、土地证
          this.form.houseOwnershipCertificateAttachList = undefined;
          this.form.landCertificateAttachList = undefined;
        }
      } else if (e === 0) {
        // 房产证+土地证
        this.form.immovablePropertyWarrantFlag = 0;
        this.form.immovablePropertyCertificateAttachIds = undefined;
        this.form.immovablePropertyCertificateAttachList = undefined;
        this.form.immovablePropertyCertificateCode = undefined;
      }
    },

    //  房产证+土地证change
    checkboxChange(e) {
      if (this.checkList.includes("房产证")) {
        this.form.houseOwnershipWarrantFlag = 1;
      } else {
        this.form.houseOwnershipWarrantFlag = 0;
      }
      if (this.checkList.includes("土地证")) {
        this.form.landCertificateWarrantFlag = 1;
      } else {
        this.form.landCertificateWarrantFlag = 0;
      }
    },
    // 新增资产类型
    addTypeClick() {
      this.form.propertyTypeList.push({
        propertyTypeCode: "",
        manageDeptId: "",
        leaseFlag: "",
      });
    },
    // 删除资产类型
    deleteTypeClick(index) {
      this.form.propertyTypeList.splice(index, 1);
    },
    // 地图校准
    calibrationClick() {
      this.$nextTick(() => {
        this.latitude = this.form.propertyGisLatitude
          ? this.form.propertyGisLatitude
          : 31.651125;
        this.longitude = this.form.propertyGisLongitude
          ? this.form.propertyGisLongitude
          : 119.028296;
        this.longitudeShow = true;
      });
    },

    /**确定 */
    longitudeDialogSubmitFn() {
      this.longitudeShow = false;
      if (this.$refs.mapRef) {
        let { form } = this.$refs.mapRef;
        this.$refs.mapRef.address = "";
        this.$refs.mapRef.destroyMap();
        if (form) {
          this.latitude = form.latitude;
          this.longitude = form.longitude;
          this.form.propertyGisLongitude = form.longitude;
          this.form.propertyGisLatitude = form.latitude;
          this.gisCoordinate = `${form.longitude},${form.latitude}`;
        }
      }
    },

    getPropertyDictList() {
      let params = {};
      propertyDictList(params).then((res) => {
        if (res.code == 200) {
          let data = [...res.data];
          console.log("数据", data);
          if (data && data.length > 0) {
            let target = data
              .filter((v) => v.businessNature === 1)
              .map((j) => {
                return {
                  label: j.propertyTypeName,
                  value: j.propertyTypeCode,
                  businessNature: j.businessNature,
                  leaseFlag: j.leaseFlag,
                };
              });

            let no_target = data
              .filter((v) => v.businessNature === 0)
              .map((j) => {
                return {
                  label: j.propertyTypeName,
                  value: j.propertyTypeCode,
                  businessNature: j.businessNature,
                  leaseFlag: j.leaseFlag,
                };
              });

            this.assetTypeList = [
              {
                value: 1,
                label: "经营性",
                children: target,
              },
              {
                value: 0,
                label: "非经营性",
                children: no_target,
              },
            ];
          }
        }
      });
    },

    // 所在社区
    getAreaList() {
      let params = {
        areaName: "",
        parentId: "",
      };
      areaList(params).then((res) => {
        this.communityList = res.data;
      });
    },
    clear() {
      this.form = {
        propertyCode: undefined,
        propertyName: undefined,
        propertyOwner: undefined,
        propertyCategoryId: undefined,
        ownershipId: undefined,
        propertyLocation: undefined,
        propertyCommunity: undefined,
        propertyGisLongitude: undefined,
        propertyGisLatitude: undefined,
        propertyAncestralLandArea: undefined,
        immovablePropertyWarrantFlag: 1,
        houseOwnershipWarrantFlag: 1,
        landCertificateWarrantFlag: 1,
        immovablePropertyCertificateAttachIds: undefined, // 不动产权证
        houseOwnershipCertificateAttachIds: undefined, // 房产证
        landCertificateAttachIds: undefined, // 土地证
        immovablePropertyCertificateCode: undefined, //不动产权证号
        houseOwnershipCertificateCode: undefined, // 房产证号
        landCertificateCode: undefined, // 土地证号
        propertyAcquireDate: undefined, //资产取得年月
        usageDate: undefined, // 投入使用年月
        landNature: 1,
        realisticPictureAttachIds: undefined,
        propertyTypeList: [
          {
            propertyTypeCode: "",
            manageDeptId: "",
            leaseFlag: "",
          },
        ],
      };
      this.deptsList = []; // 管理部门
      this.realisticPhotosList = []; // 实景照片
      this.realisticPhotosdialogImageUrl = ""; // 预览实景照片
      this.realisticPhotosdialogVisible = false;
      this.realEstateList = []; // 不动产权证
      this.propertyCertificateList = []; // 房产证
      this.landCertificateList = []; // 土地证
      this.flag = 1; // 默认是不动产权证
      this.assetTypeList = []; // 资产类型List
      this.communityList = []; // 所在社区list
      this.gisCoordinate = ""; //坐标
    },

    cascaderChange(val, index) {
      let info = this.assetTypeList.filter((item) => item.value === val[0]);
      if (info && info.length > 0) {
        let W = info[0].children.filter((j) => j.value === val[1]);
        if (W && W.length > 0) {
          this.form.propertyTypeList[index].leaseFlag = W[0].leaseFlag;
        }
      }
    },

    /**新增资产 */
    onSubmit() {
      if (!this.form.propertyCode) {
        this.$message.error("请输入资产地块编号");
        return;
      }
      if (!this.form.propertyName) {
        this.$message.error("请输入资产地块名称");
        return;
      }
      if (!this.form.propertyOwner) {
        this.$message.error("请输入产权人");
        return;
      }

      if (!this.form.ownershipId) {
        this.$message.error("请选择所属单位");
        return;
      }

      // 表示已经填写GIS坐标
      if (this.gisCoordinate) {
        if (this.gisCoordinate.includes(",")) {
          let parts = this.gisCoordinate.split(",");
          if (parts.length > 0) {
            this.form.propertyGisLongitude = parts[0];
            this.form.propertyGisLatitude =
              parts.length > 1 ? parts[1].trim() : "";
          }
        } else if (this.gisCoordinate.includes("，")) {
          let parts = this.gisCoordinate.split("，");
          if (parts.length > 0) {
            this.form.propertyGisLongitude = parts[0];
            this.form.propertyGisLatitude =
              parts.length > 1 ? parts[1].trim() : "";
          }
        }
      } else {
        this.$message.error("请输入经纬度");
        return;
      }

      if (!this.form.propertyAncestralLandArea) {
        this.$message.error("请输入宗地面积");
        return;
      }

      if (!this.form.realisticPictureAttachIds) {
        this.$message.error("请上传实景照片");
        return;
      }

      // return;
      const target = this.form.propertyTypeList.filter(
        (v) => !v.propertyTypeCode || !v.manageDeptId
      );

      if (target && target.length > 0) {
        this.$message.error("请填写完整管理类型");
        return;
      }

      if (this.forBaseInfo && this.forBaseInfo.propertyId) {
        if (
          this.form.propertyTypeList &&
          this.form.propertyTypeList.length > 0
        ) {
          this.form.propertyTypeList = this.form.propertyTypeList.map((v) => {
            if (v.manageDeptId.length > 0 && v.propertyTypeCode.length > 0) {
              return {
                manageDeptId: v.manageDeptId[v.manageDeptId.length - 1],
                propertyTypeCode: v.propertyTypeCode[1],
                businessNature: v.propertyTypeCode[0],
                leaseFlag: v.leaseFlag,
                propertyTypeId: v.propertyTypeId,
              };
            } else {
              return {
                manageDeptId: v.manageDeptId,
                propertyTypeCode: v.propertyTypeCode,
                businessNature: v.businessNature,
                leaseFlag: v.leaseFlag,
                propertyTypeId: v.propertyTypeId,
              };
            }
          });
        }
        // 编辑
        editProperty(this.form)
          .then((res) => {
            if (res.code == 200) {
              this.$message.success("编辑成功");
              this.$emit("update:drawer", false);
              this.$emit("childEvent");
              this.$emit("childZcEvent");
              this.clear();
            }
          })
          .catch((e) => {
            this.$message.error(e.msg);
          });
      } else {
        this.form.propertyCategoryId = this.propertyCategoryId;
        // 处理管理部门
        if (
          this.form.propertyTypeList &&
          this.form.propertyTypeList.length > 0
        ) {
          this.form.propertyTypeList = this.form.propertyTypeList.map((v) => {
            return {
              manageDeptId: v.manageDeptId[v.manageDeptId.length - 1],
              propertyTypeCode: v.propertyTypeCode[1],
              businessNature: v.propertyTypeCode[0],
              leaseFlag: v.leaseFlag,
            };
          });
        }

        let params = {
          ...this.form,
        };

        addProperty(params)
          .then((res) => {
            if (res.code == 200) {
              this.$message.success("新增成功");
              this.$emit("update:drawer", false);
              this.$emit("childEvent");
              this.$emit("childZcEvent");
              this.clear();
            }
          })
          .catch((e) => {
            this.$message.error(e.msg);
          });
      }
    },
  },
};
</script>

<style lang="scss" scoped>
@import "~@/styles/mixin.scss";

.add-property-drawer {
  .add-property-content {
    width: 100%;
    .add-property-content-scroll {
      height: calc(100vh - 112px);
      overflow-y: auto;
    }
  }
  .upload-img-opt {
    .el-upload__text {
      font-size: 14px;
      font-style: normal;
      line-height: 0;
      padding-top: 10px;
    }
    .img-content {
      flex: 1;
      background: #fafafa;
      margin-left: 6px;
    }
  }
  .upload-quanz {
    width: 90%;
    height: 120px;
    background: #fafafa;
    font-size: 14px;
    .fcz {
      display: flex;
      align-items: baseline;
      margin: 15px 0 15px 15px;
    }
    .tdz {
      display: flex;
      align-items: baseline;
      margin: 0 0 0 15px;
    }
  }
  .type-content {
    width: 98%;
    background-color: #fafafa;
    padding: 0 20px 20px;
    height: auto;
    // overflow: auto;
    .add-type {
      width: 84.5%;
      height: 30px;
      line-height: 30px;
      text-align: center;
      color: #dcdcdc;
      border: 1px dotted #dcdcdc;
      background: #fff;
      cursor: pointer;
    }
    tr {
      width: 100%;
      display: flex;
      align-items: center;
      margin-bottom: 10px;
      th {
        text-align: center;
        font-size: 14px;
        color: #505a69;
        padding: 10px 0;
        &:nth-child(1) {
          width: 35%;
        }
        &:nth-child(2) {
          width: 50%;
        }
      }
      td {
        &:nth-child(1) {
          width: 35%;
        }
        &:nth-child(2) {
          width: 55%;
        }
        &:nth-child(3) {
          width: 10%;
          img {
            width: 24px;
            height: 24px;
            cursor: pointer;
          }
        }
      }
    }
  }
  .upload-info {
    display: flex;
    align-items: center;
  }
  .upload-demo {
    display: flex;
    align-items: baseline;
    flex-direction: row-reverse;
  }
}
</style>
<style lang="scss">
.add-property-drawer {
  .el-drawer__header {
    background-color: #fafafa;
    padding: 0;
    color: #0064c8;
    font-weight: 600;
    margin-bottom: 5px;
  }
  .quanType {
    .el-form-item__label {
      width: 90px !important;
    }
  }
  .el-form-item__label {
    color: #000;
  }
  header#el-drawer__title {
    padding: 10px;
  }
  .el-form-item__content {
    display: contents;
  }
  .el-col {
    margin-left: 20px;
  }
  .el-form-item__label {
    text-align: left;
  }
  .el-form-item--small.el-form-item {
    margin-bottom: 10px;
  }
  .el-upload--picture-card {
    background-color: #fafafa;
    display: flex;
    flex-direction: column;
    padding-top: 40px;
    i {
      font-size: 35px;
    }
  }
  .opt-cla {
    margin: 20px;
    .el-button--default,
    .el-button--primary {
      width: 95px;
      height: 32px;
      padding: 0;
    }
  }
  .el-dialog {
    margin-top: 4vh !important;
  }
  .el-dialog__body {
    padding: 5px 20px;
  }
  .upload-demo {
    .el-upload-list__item {
      background: #b9dbff !important;
      border-radius: 4px 4px 4px 4px !important;
    }
    .el-upload-list__item-name {
      color: #0052d9 !important;
    }
    .el-icon-document {
      color: #0052d9 !important;
    }
    .el-upload-list {
      margin-right: 10px;
    }
  }
}
</style>
